import React from "react";
import PropTypes from "prop-types";
import StyledConversation, { Conversations, MyCharBubble } from "./style";
import ChatBubble from "components/ChatBubble";
import VoiceMessage from "components/VoiceMessage";
import Emoji from "components/Emoji";
import Footer from "components/Footer";
import TitleBar from "components/TitleBar";

function Conversation({ children, ...rest }) {
  return (
    <StyledConversation {...rest}>
      <TitleBar />
      <Conversations>
        <ChatBubble time="昨天 下午12:00">Hi, 忙啥呢？</ChatBubble>
        <MyCharBubble time="昨天 下午12:01">忙工作，怼人</MyCharBubble>
        <ChatBubble time="昨天 下午14:01">
          <VoiceMessage time="01:54" />
        </ChatBubble>
        <MyCharBubble time="昨天 下午14:30">
          明天约起来<Emoji>😀</Emoji>
        </MyCharBubble>
      </Conversations>
      <Footer />
    </StyledConversation>
  );
}

Conversation.propTypes = {
  children: PropTypes.any,
};

export default Conversation;
